<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <title>车辆管理</title>
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <style type="text/css">
    /* .el-more-list {
        overflow-y: scroll;
        max-height: 240px;
    } */
    .el-dialog{width: 80%}
  </style>
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <script src="../plugins/ECharts/echarts-4.1.0.js"></script>
</head>
<body>
  <div id="app" v-cloak v-show="appShow"  class="animated fadeInRight">
    <el-form ref="carVehicleForm" :model="carVehicleForm" label-width="80px" style="width: 900px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="车型/代号">
            <el-input v-model="carVehicleForm.modelCode" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="VIN码">
            <el-input v-model="carVehicleForm.vinCode" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="制造平台">
            <el-input v-model="carVehicleForm.platform" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆类型">
            <el-select v-model="carVehicleForm.vehicleType" clearable placeholder="请选择" size="small">
              <el-option 
                v-for="item in optionType"
                :key="item.keyValue"
                :label="item.keyName"
                :value="item.keyValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="T-BOX号">
            <el-input v-model="carVehicleForm.tboxSerialNo" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="SIM卡号">
            <el-input v-model="carVehicleForm.simNo" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="onSubmit" clearable size="small" v-show="resourceMap.queryVehicleInfo">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="newAdd" v-show="resourceMap.saveVehicleInfo">新增</el-button>
      <el-button type="primary" size="small" icon="el-icon-delete" @click="onSelectDel" v-show="resourceMap.deleteVehicleInfo">删除选中</el-button>
    </div>
    <br>
    <!-- table -->
    <el-table :data="tableData.list" border size="small" :max-height="windowHeight" style="width: 100%"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="modelCode" label="车型/代号" width=""></el-table-column>
      <el-table-column prop="plateNo" label="车牌号"> </el-table-column>
      <el-table-column prop="vehicleType" label="类型"></el-table-column>
      <el-table-column prop="gmt_create" label="注册时间"></el-table-column>
      <el-table-column prop="gmt_modified" label="激活时间"></el-table-column>
      <el-table-column label="是否在线" width="">
          <template slot-scope="scope">
              <span class="label-inuse" v-if="scope.row.online">在线</span>
              <span class="label-outuse" v-else>不在线</span>
          </template>
      </el-table-column>
      <el-table-column prop="vinCode" label="车架号" width=""></el-table-column>
      <el-table-column label="操作"  width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)" v-show="resourceMap.updateVehicleInfo">编辑</el-button>
          <el-button size="mini" type="info" @click="handleInfo(scope.$index,scope.row)">整车状态</el-button>
          <el-button size="mini" type="primary" @click="realTime(scope.$index,scope.row)">实时详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- page -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[20,50,100,150,200]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="tableData.totalElement">
    </el-pagination>
    <!-- dialog NewAdd -->
    <el-dialog title="车辆信息" :visible.sync="dialogNewAdd" width="50%">
      <el-tabs v-model="activeName1" type="border-card" class="dialog-shadow">
        <el-tab-pane label="车辆信息" name="first">
          <el-form :model="formDialogFixedInfo" :rules="rules" ref="ruleForm1">
            <el-row>
              <el-col :span="8">
                <el-form-item label="VIN码" :label-width="formLabelWidth" prop="vinCode">
                  <el-input v-model="formDialogFixedInfo.vinCode" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车架号" :label-width="formLabelWidth" prop="frameNo">
                  <el-input v-model="formDialogFixedInfo.frameNo" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车牌号" :label-width="formLabelWidth" prop="plateNo">
                  <el-input v-model="formDialogFixedInfo.plateNo" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="车辆型号" :label-width="formLabelWidth" prop="modelCode">
                  <el-input v-model="formDialogFixedInfo.modelCode" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="配置" :label-width="formLabelWidth" prop="config">
                  <el-input v-model="formDialogFixedInfo.config" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="车身颜色" :label-width="formLabelWidth" prop="color">
                  <!-- <el-input v-model="formDialogFixedInfo.color" size="small"></el-input> -->
                  <el-select v-model="formDialogFixedInfo.color" clearable size="small" placeholder="请选择" style="width: 100%">
                    <el-option 
                      v-for="item in optionColor"
                      :key="item.keyValue"
                      :label="item.keyName"
                      :value="item.keyValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="汽车类型" :label-width="formLabelWidth" prop="vehicleType">
                  <el-select v-model="formDialogFixedInfo.vehicleType" clearable size="small" placeholder="请选择" style="width: 100%">
                    <el-option 
                      v-for="item in optionType"
                      :key="item.keyValue"
                      :label="item.keyName"
                      :value="item.keyValue">
                    </el-option>
                  </el-select>
                </el-form-item>                
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-tabs v-model="activeName2" type="border-card" class="dialog-shadow">
        <el-tab-pane label="T-BOX信息" name="first">
          <el-form :model="formDialogFixedInfo" label-width="120px" :rules="rules" ref="ruleForm2">
            <el-row>
              <el-col :span="8">
                <el-form-item label="T-BOX型号" prop="tboxModelCode">
                  <el-input v-model="formDialogFixedInfo.tboxModelCode" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="T-BOX序列号" prop="tboxSerialNo">
                  <el-input v-model="formDialogFixedInfo.tboxSerialNo" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="网联类型" prop="netType">
                  <el-select v-model="formDialogFixedInfo.netType" clearable size="small" placeholder="请选择" style="width: 100%">
                      <el-option label="2G" value="2G"></el-option>
                      <el-option label="3G" value="3G"></el-option>
                      <el-option label="4G" value="4G"></el-option>
                      <el-option label="5G" value="5G"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="ICCID" prop="iccid">
                  <el-input v-model="formDialogFixedInfo.iccid" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="SIM卡号" prop="simNo">
                  <el-input v-model="formDialogFixedInfo.simNo" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="绑定VIN码" prop="bindVinCode">
                  <el-input v-model="formDialogFixedInfo.bindVinCode" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewAdd = false" size="small">取 消</el-button>
        <el-button @click="resetForm('ruleForm1','ruleForm2')" size="small">重 置</el-button>
        <el-button type="primary" @click="newAddSubmit('ruleForm1','ruleForm2')" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- dialog Information -->
    <dialog-status :dialogmiss="dialogInfo" :vincodemini="vinCodemini" @dialog-hidden="dialogHid"></dialog-status>
    <!-- 实时详情 -->
    <el-dialog :title='realTimeTitle' :visible.sync='dialogInfoTime' :before-close="beforeCloseTime">
      <el-row>
        <el-col>
          <!-- <div id='realTime' style='height: 250px'></div> -->
          <el-tabs tab-position="left" style="height: 100%;">
            <el-tab-pane label="整车数据">
              <div class="el-more-list" v-if="moreData.fullVehicleInfo">
                <div class="el-more-item">
                  <span>车辆状态：</span>
                  <span>{{moreData.fullVehicleInfo.status}}</span>
                </div>
                <div class="el-more-item">
                  <span>充电状态：</span>
                  <span>{{moreData.fullVehicleInfo.chargStatus}}</span>
                </div>
                <div class="el-more-item">
                  <span>运行模式：</span>
                  <span>{{moreData.fullVehicleInfo.runMode}}</span>
                </div>
                <div class="el-more-item">
                  <span>车速：</span>
                  <span>{{moreData.fullVehicleInfo.speed}} (km/h)</span>
                </div>
                <div class="el-more-item">
                  <span>累计里程：</span>
                  <span>{{moreData.fullVehicleInfo.totalMileage}} (km)</span>
                </div>
                <div class="el-more-item">
                  <span>总电压：</span>
                  <span>{{moreData.fullVehicleInfo.totalVoltage}} (V)</span>
                </div>
                <div class="el-more-item">
                  <span>总电流：</span>
                  <span>{{moreData.fullVehicleInfo.totalCurrent}} (A)</span>
                </div>
                <div class="el-more-item">
                  <span>SOC电量：</span>
                  <span>{{moreData.fullVehicleInfo.soc}} (%)</span>
                </div>
                <div class="el-more-item">
                  <span>DC-DC状态：</span>
                  <span>{{moreData.fullVehicleInfo.dcStatus}}</span>
                </div>
                <div class="el-more-item">
                  <span>档位：</span>
                  <span>{{moreData.fullVehicleInfo.gear}}</span>
                </div>
                <div class="el-more-item">
                  <span>绝缘电阻：</span>
                  <span>{{moreData.fullVehicleInfo.insResistance}} (kΩ)</span>
                </div>
                <div class="el-more-item">
                  <span>加速踏板行程值：</span>
                  <span>{{moreData.fullVehicleInfo.speedStrokeValue}} (%)</span>
                </div>
                <div class="el-more-item">
                  <span>制动踏板状态：</span>
                  <span>{{moreData.fullVehicleInfo.brakePedalCondition}}</span>
                </div>
                <div class="el-more-item">
                  <span>制动力：</span>
                  <span>{{moreData.fullVehicleInfo.brakingForce}}</span>
                </div>
                <div class="el-more-item">
                  <span>驱动力：</span>
                  <span>{{moreData.fullVehicleInfo.driveForce}}</span>
                </div>
              </div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
            </el-tab-pane>
            <el-tab-pane label="驱动电机数据">
              <div class="el-more-list someMore" v-for="item in moreData.motoInfo" v-if="moreData.motoInfo">
                <div class="el-more-item">
                  <span>驱动电机序号：</span>
                  <span>{{item.driveMotorSerialNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>驱动电机状态：</span>
                  <span>{{item.driveMotorStatus}}</span>
                </div>
                <div class="el-more-item">
                  <span>驱动电机控制器温度：</span>
                  <span>{{item.driveMotorConTemp}} (℃)</span>
                </div>
                <div class="el-more-item">
                  <span>驱动电机转速：</span>
                  <span>{{item.driveMotorSpeed}} (r/min)</span>
                </div>
                <div class="el-more-item">
                  <span>驱动电机转矩：</span>
                  <span>{{item.driveMotorTorque}} (N·m)</span>
                </div>
                <div class="el-more-item">
                  <span>驱动电机温度：</span>
                  <span>{{item.driveMotorTemp}} (℃)</span>
                </div>
                <div class="el-more-item">
                  <span>电机控制器输入电压：</span>
                  <span>{{item.motorContInVol}} (V)</span>
                </div>
                <div class="el-more-item">
                  <span>电机控制器直流母线电流：</span>
                  <span>{{item.motorConDcBusCur}} (A)</span>
                </div>
              </div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
            </el-tab-pane>
            <el-tab-pane label="车辆位置数据">
              <div class="el-more-list" v-if="moreData.locationInfo">
                <div class="el-more-item">
                  <span>定位状态：</span>
                  <span>{{moreData.locationInfo.positionStatus}}</span>
                </div>
                <div class="el-more-item">
                  <span>经度：</span>
                  <span>{{moreData.locationInfo.lng}}</span>
                </div>
                <div class="el-more-item">
                  <span>纬度：</span>
                  <span>{{moreData.locationInfo.lat}}</span>
                </div>
              </div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
            </el-tab-pane>
            <el-tab-pane label="极值数据">
              <div class="el-more-list" v-if="moreData.abxMaxInfo">
                <div class="el-more-item">
                  <span>最高电压电池子系统号：</span>
                  <span>{{moreData.abxMaxInfo.hvolBatSubNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>最高电压电池单体代号:</span>
                  <span>{{moreData.abxMaxInfo.hvolBatCellNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>电池单体电压最高值：</span>
                  <span>{{moreData.abxMaxInfo.maxBatVoltage}} (V)</span>
                </div>
                <div class="el-more-item">
                  <span>最低电压电池子系统号：</span>
                  <span>{{moreData.abxMaxInfo.lvolBatSubNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>最低电压电池单体代号：</span>
                  <span>{{moreData.abxMaxInfo.lvolBatCellNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>电池单体电压最低值：</span>
                  <span>{{moreData.abxMaxInfo.lvolCell}} (V)</span>
                </div>
                <div class="el-more-item">
                  <span>最高温度子系统号：</span>
                  <span>{{moreData.abxMaxInfo.htempSubNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>最高温度探针序号：</span>
                  <span>{{moreData.abxMaxInfo.htempProSerialNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>最高温度值：</span>
                  <span>{{moreData.abxMaxInfo.maxTemp}} (℃)</span>
                </div>
                <div class="el-more-item">
                  <span>最低温度子系统号：</span>
                  <span>{{moreData.abxMaxInfo.ltempSubNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>最低温度探针序号：</span>
                  <span>{{moreData.abxMaxInfo.ltempProSerialNum}}</span>
                </div>
                <div class="el-more-item">
                  <span>最低温度：</span>
                  <span>{{moreData.abxMaxInfo.minTemp}} (℃)</span>
                </div>
              </div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
            </el-tab-pane>
            <el-tab-pane label="报警数据">
              <div class="el-more-list"  v-if="moreData.alarmInfo">
                  <div class="el-more-item">
                    <span>最高报警等级：</span>
                    <span>{{moreData.alarmInfo.halarmLevel}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>通用报警标识：</span>
                    <span>{{moreData.alarmInfo.generalAlarm}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>可充电储能装置故障总数：</span>
                    <span>{{moreData.alarmInfo.totalStorageFaults}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>可充电储能装置故障代码列表：</span>
                    <span>{{moreData.alarmInfo.storageFaults}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>驱动电机故障总数：</span>
                    <span>{{moreData.alarmInfo.totalMotorFaults}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>驱动电机故障代码列表：</span>
                    <span>{{moreData.alarmInfo.motorFaults}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>发动机故障总数：</span>
                    <span>{{moreData.alarmInfo.totalEngineFaults}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>发动机故障代码列表：</span>
                    <span>{{moreData.alarmInfo.engineFaults}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>其他故障总数：</span>
                    <span>{{moreData.alarmInfo.totalOtherFaults}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>其他故障代码列表：</span>
                    <span>{{moreData.alarmInfo.otherFaults}}</span>
                  </div>
              </div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
              <div class="el-more-list someMore" v-show="showWarnList">
                <p style="margin-left: 20px;color: #18A689;">通用报警标识：</p>
                <div class="el-more-item" v-for="item in moreData.alarmInfo.generalAlarmDetail">
                  <span>{{item}}</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="燃料电池数据">
              <div class="el-more-list" v-if="moreData.fullCellInfo">
                <div class="el-more-item">
                  <span>燃料电池电压：</span>
                  <span>{{moreData.fullCellInfo.fuelCellVol}} (V)</span>
                </div>
                <div class="el-more-item">
                  <span>燃料电池电流：</span>
                  <span>{{moreData.fullCellInfo.fuelCellCur}} (A)</span>
                </div>
                <div class="el-more-item">
                  <span>燃料消耗率：</span>
                  <span>{{moreData.fullCellInfo.fuelRate}} (kg/100km)</span>
                </div>
                <div class="el-more-item">
                  <span>燃料电池温度探针总数：</span>
                  <span>{{moreData.fullCellInfo.fuelCellTempProTotal}}</span>
                </div>
                <div class="el-more-item">
                  <span>探针温度值：</span>
                  <span>{{moreData.fullCellInfo.probeTempValue}} (℃)</span>
                </div>
                <div class="el-more-item">
                  <span>氢系统中最高温度：</span>
                  <span>{{moreData.fullCellInfo.hTempHydrogen}} (℃)</span>
                </div>
                <div class="el-more-item">
                  <span>氢系统中最高温度探针代号：</span>
                  <span>{{moreData.fullCellInfo.maxTempProCodeHydrogen}}</span>
                </div>
                <div class="el-more-item">
                  <span>氢气最高浓度：</span>
                  <span>{{moreData.fullCellInfo.maxHydrogenCon}} (mg/kg)</span>
                </div>
                <div class="el-more-item">
                  <span>氢气最高浓度传感器代号：</span>
                  <span>{{moreData.fullCellInfo.hydMaxConSensorCode}}</span>
                </div>
                <div class="el-more-item">
                  <span>氢气最高压力：</span>
                  <span>{{moreData.fullCellInfo.maxHydPressure}} (MPa)</span>
                </div>
                <div class="el-more-item">
                  <span>氢气最高压力传感器代号：</span>
                  <span>{{moreData.fullCellInfo.maxHydPressureProCode}}</span>
                </div>
                <div class="el-more-item">
                  <span>高压DC/DC状态：</span>
                  <span>{{moreData.fullCellInfo.dcStatus}}</span>
                </div>
              </div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
            </el-tab-pane>
            <el-tab-pane label="发动机数据">
              <div class="el-more-list" v-if="moreData.engineInfo">
                  <div class="el-more-item">
                    <span>发动机状态：</span>
                    <span>{{moreData.engineInfo.engineStatus}}</span>
                  </div>
                  <div class="el-more-item">
                    <span>曲轴转速：</span>
                    <span>{{moreData.engineInfo.crankSpeed}} (r/min)</span>
                  </div>
                  <div class="el-more-item">
                    <span>燃料消耗率：</span>
                    <span>{{moreData.engineInfo.conRate}} (L/100km)</span>
                  </div>
              </div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
            </el-tab-pane>
            <el-tab-pane label="电池组电压数据">
              <div id="VoltageInfo" v-if="VoltageInfo"></div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
            </el-tab-pane>
            <el-tab-pane label="电池组温度数据">
              <div id="TempInfo" v-if="TempInfo"></div>
              <div v-else><el-alert title="暂无数据" type="info" :closable="false"></el-alert></div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <!-- 公共仪表盘组件 -->
  <script src="../js/vehicleInfo.js"></script>
  <script>
    var myChart,option,Interval,temp,tempOption,Volt,VoltOption,flag=false;
    var vm=new Vue({
      el: '#app',
      components:{
          'dialog-status': ComponentA
      },
      data: function() {
        return {
          appShow:false,
          resourceMap:storageLocal.getName('vehicle'),
          tableData: [],
          carVehicleForm: {},
          formLabelWidth:'120px',
          windowHeight:(window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 270,
          dialogNewAdd: false,
          dialogInfo:false,
          formDialogFixedInfo: {},
          multipleSelection:[],
          currentPage:1,
          pageSize:50,
          currentPagemini:1,
          pageSizemini:19,
          vinCodemini:0,
          vinCodeTime:'',
          dialogInfoTime:false,
          optionType:[],//车辆下拉类型
          optionColor:[],//车辆下拉颜色
          // 实时
          moreData:{
            fullVehicleInfo:{},
            motoInfo:[],
            locationInfo:{},
            abxMaxInfo:{},
            alarmInfo:{},
            fullCellInfo:{},
            engineInfo:{},
          },
          TempInfo:{},
          VoltageInfo:{},
          showWarnList:false,
          realTimeTitle:'',
          // 实时
          activeName1:'first',
          activeName2: 'first',
          datePicker:{dataStart:'',dataEnd:''},
          rules: {//有效性验证规则
	          bindVinCode: [
	            { required: true, message: '请绑定VIN码', trigger: 'blur' },
	          ],
	          vinCode: [
	            { required: true, message: '请输入VIN码', trigger: 'blur' }
	          ],
	          frameNo: [
	            { required: true, message: '请输入车架号', trigger: 'blur' }
	          ],
	          plateNo: [
	            { required: true, message: '请输入车牌号', trigger: 'blur' }
	          ],
            modelCode:[
              { required: true, message: '请输入车辆型号', trigger: 'blur' }
            ],
            config:[
              { required: true, message: '请输入配置', trigger: 'blur' }
            ],
            color:[
              { required: true, message: '请输入车身颜色', trigger: 'blur' }
            ],
            vehicleType:[
              { required: true, message: '请选择汽车类型', trigger: 'change' }
            ],
            tboxModelCode:[
              { required: true, message: '请输入T-BOX型号', trigger: 'blur' }
            ],
            tboxSerialNo:[
              { required: true, message: '请输入T-BOX序列号', trigger: 'blur' }
            ],
            netType:[
              { required: true, message: '请选择网联类型', trigger: 'change' }
            ],
            iccid:[
              { required: true, message: '请输入iccid', trigger: 'blur' }
            ],
            simNo:[
              { required: true, message: '请输入SIM卡号', trigger: 'blur' }
            ]
	        },
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
          this.getSelectCar()
        })
      },
      updated:function(){
        this.appShow = true
      },
      methods: {
          onSubmit:function() {//查询
            this.currentPage = 1;
            this.requestModel()
          },
          handleSelectionChange:function(val){//table 多选
            this.multipleSelection = val;
          },
          onSelectDel:function() {//删除选中数据
            if(this.multipleSelection.length == 0){
              this.$message({ showClose: true, message: '提示，还未选中对象', type: 'warning', duration:1000 });
              return
            }
            var arry = _.map(vm.multipleSelection, function(num){ 
              return num.id; 
            });
            this.$alert('此操作将删除选中数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              showCancelButton:true,
              type: 'warning',
              callback: function(action){
                if (action == "confirm") {
                  var data = {allKeys:arry}
                  resourceRequst("/vehicle/deleteVehicleInfo",data,function(res){
                    var table  = _.filter(vm.tableData.list, function(item){ 
                      return arry.indexOf(item.id) < 0 
                    });
                    vm.tableData.list = table;
                    vm.$message({ type: 'success', message: "删除成功！" });
                  })
                }
              }
            });
          },
          newAdd:function(){//table--新增
            this.formDialogFixedInfo = {};
            this.dialogNewAdd = true;
          },
          handleEdit:function(index, row) {//table -- 编辑
            row.index = index;
            // cookieUtil.setCookie('activeRow_vehicle',row,1)
            this.formDialogFixedInfo = JSON.parse(JSON.stringify(row));
            this.dialogNewAdd = true;
          },
          handleInfo:function(index, row) {//table -- 详情
            this.vinCodemini = row.vinCode;
            this.dialogInfo = true;
          },
          realTime:function(index, row){//实时详情
            this.vinCodeTime = row.vinCode;
            this.dialogInfoTime = true;
            this.realTimeResult()
          },
          setFloop:function(){
              var _this = this
              setTimeout(function(){
                  if(document.getElementById("realTime")){
                  _this.showGaugeTime()  
                  _this.setIntervalTime()   
                  }else{
                  _this.setFloop()
                  }
              },500)
          },
          showGaugeTime:function(){//显示 仪表盘
              var dom = document.getElementById("realTime");
              myChart = echarts.init(dom);
              option = {
                  tooltip : {//弹窗组件
                      formatter: "{a} <br/>{c} {b}"
                  },
                  series : [
                      {
                          name:'转速',
                          type:'gauge',
                          center : ['20%', '55%'],    // 默认全局居中
                          radius : '60%',
                          min:0,
                          max:7,
                          endAngle:45,
                          splitNumber:7,
                          axisLine: {            // 坐标轴线
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  width: 8
                              }
                          },
                          axisTick: {            // 坐标轴小标记
                              length :12,        // 属性length控制线长
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  color: 'auto'
                              }
                          },
                          splitLine: {           // 分隔线
                              length :20,         // 属性length控制线长
                              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                  color: 'auto'
                              }
                          },
                          pointer: {
                              width:5
                          },
                          title : {
                              offsetCenter: [0, '-25%'],       // x, y，单位px
                              textStyle:{
                                  fontSize:10
                              }
                          },
                          detail : {
                              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                  fontWeight: 'bolder',
                                  fontSize:23
                              }
                          },
                          data:[{value: 0, name: 'x1000 r/m'}]
                      },
                      {
                          name:'速度',
                          type:'gauge',
                          z: 3,
                          min:0,
                          max:220,
                          radius : '90%',
                          splitNumber:11,
                          axisLine: {            // 坐标轴线
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  width: 10
                              }
                          },
                          axisTick: {            // 坐标轴小标记
                              length :15,        // 属性length控制线长
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  color: 'auto'
                              }
                          },
                          splitLine: {           // 分隔线
                              length :20,         // 属性length控制线长
                              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                  color: 'auto'
                              }
                          },
                          title : {
                              offsetCenter: ['-5%', '-35%'],
                              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                  fontWeight: 'bolder',
                                  fontSize: 20,
                                  fontStyle: 'italic'
                              }
                          },
                          detail : {
                              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                  fontWeight: 'bolder'
                              }
                          },
                          data:[{value: 0, name: 'km/h'}]
                      },
                      {
                          name:'电量',
                          type:'gauge',
                          center : ['80%', '50%'],    // 默认全局居中
                          radius : '60%',
                          min:0,
                          max:100,
                          startAngle:135,
                          endAngle:45,
                          splitNumber:2,
                          axisLine: {            // 坐标轴线
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
                                  width: 8
                              }
                          },
                          axisTick: {            // 坐标轴小标记
                              splitNumber:5,
                              length :10,        // 属性length控制线长
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  color: 'auto'
                              }
                          },
                          axisLabel: {
                              formatter:function(v){
                                  switch (v + '') {
                                      case '0' : return 'L';
                                      case '50' : return 'Soc';
                                      case '100' : return 'H';
                                  }
                              }
                          },
                          splitLine: {           // 分隔线
                              length :15,         // 属性length控制线长
                              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                  color: 'auto'
                              }
                          },
                          pointer: {
                              width:2
                          },
                          title : {
                              show: false
                          },
                          detail : {
                              show: false
                          },
                          data:[{value: 5, name: '%'}]
                      },
                      {
                          name:'温度',
                          type:'gauge',
                          center : ['80%', '50%'],    // 默认全局居中
                          radius : '60%',
                          min:-40,
                          max:210,
                          startAngle:315,
                          endAngle:225,
                          splitNumber:2,
                          axisLine: {            // 坐标轴线
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
                                  width: 8
                              }
                          },
                          axisTick: {            // 坐标轴小标记
                              show: false
                          },
                          axisLabel: {
                              formatter:function(v){
                                  switch (v + '') {
                                      case '-40' : return 'L';
                                      case '85' : return 'Temp';
                                      case '210' : return 'H';
                                  }
                              }
                          },
                          splitLine: {           // 分隔线
                              length :15,         // 属性length控制线长
                              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                  color: 'auto'
                              }
                          },
                          pointer: {
                              width:2
                          },
                          title : {
                              show: false
                          },
                          detail : {
                              show: false
                          },
                          data:[{value: -40, name: '℃'}]
                      }
                  ]
              };
              if (option && typeof option === "object") {
                  myChart.setOption(option, true);
              }
          },
          // beforeClose:function(){
          //   var data = cookieUtil.getCookie('activeRow_vehicle')
          //   if(data){
          //     vm.tableData.list.splice(data.index,1,data)
          //     this.dialogNewAdd = false;
          //     cookieUtil.removeCookie('activeRow_vehicle')
          //   }else{
          //     this.dialogNewAdd = false;
          //   }
          //   this.$refs.ruleForm1.resetFields();
          //   // this.$refs.ruleForm2.resetFields();
          // },
          resetForm:function(formName1,formName2) {////新增/修改--车型信息- 重置
            this.$refs[formName1].resetFields();
            // this.$refs[formName2].resetFields();
          },
          newAddSubmit:function(formName1,formName2){ //新增/修改--车型信息-提交
            this.$refs[formName1].validate(function(valid){
              if (valid){
                vm.$refs[formName2].validate(function(valid){
                  if (valid) {
                    var data = vm.formDialogFixedInfo; 
                    data.id = data.id?data.id:''
                    if(data.id != ''){
                      resourceRequst("/vehicle/updateVehicleInfo",data,function(res){
                        vm.$message({message: '修改成功',type: 'success'});
                        vm.dialogNewAdd = false;
                        vm.requestModel();
                      })
                    }else{
                      resourceRequst("/vehicle/saveVehicleInfo",data,function(res){
                        vm.tableData.list.unshift(res.getResult);
                        vm.$message({message: '添加成功',type: 'success'});
                        vm.dialogNewAdd = false;
                      })
                    } 
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
              }
            });
          },
          handleSizeChange:function(val) {//table-分页
            this.pageSize = val;
            this.requestModel()
          },
          handleCurrentChange:function(val) {//table-分页
            this.requestModel()
          },
          requestModel:function(){
            var data = {
              "modelCode":this.carVehicleForm.modelCode?this.carVehicleForm.modelCode:'',
              "vehicleType":this.carVehicleForm.vehicleType?this.carVehicleForm.vehicleType:'', 
              "vinCode":this.carVehicleForm.vinCode?this.carVehicleForm.vinCode:'', 
              "tboxSerialNo":this.carVehicleForm.tboxSerialNo?this.carVehicleForm.tboxSerialNo:'', 
              "simNo":this.carVehicleForm.simNo?this.carVehicleForm.simNo:'', 
              "page":this.currentPage -1 ,
              "pageSize":this.pageSize
            }
            resourceRequst("/vehicle/queryVehicleInfo",data,function(res){
                vm.tableData = res.getResult
            })
          },
          realTimeResult:function(){//实时详情请求
            this.setIntervalTime()
            Interval = setInterval(this.setIntervalTime,5000)
          },
          setIntervalTime:function(){
            var data = {
              "vinCode":this.vinCodeTime
            }
            resourceRequst("/vehicle/queryLastStatusDetailInfo",data,function(res){
                var data1 = JSON.parse(res.batteryTempInfo.tempProbeValues);
                var data2 = JSON.parse(res.batteryVoltageInfo.chargEnergyVoltage);
                vm.moreData = res;
                vm.TempInfo = data1;
                vm.VoltageInfo = data2;  
                vm.realTimeTitle = 'vinCode:'+res.fullVehicleInfo.vin +" --- 时间："+res.fullVehicleInfo.uploadTime;
                if(vm.moreData.alarmInfo.generalAlarmDetail.length){
                  vm.showWarnList = true
                }else{
                  vm.showWarnList = false
                }
            },true)
          },
          beforeCloseTime:function(){//关闭实时详情-执行方法
            this.dialogInfoTime = false;
            clearInterval(Interval);
          },
          dialogHid:function(){//响应子组件的 emit
            this.dialogInfo = false
          },
          initEchar:function(){//初始化实时详情的 Echarts
            var domV = document.getElementById("VoltageInfo");
            domV.style.width = (window.innerWidth*0.8 - 193) + 'px';
            domV.style.height = (window.innerHeight - 193) + 'px';
            Volt = echarts.init(domV);
            VoltOption = {
                color: ['#50A3BA'],
                tooltip:{},
                xAxis: {
                    type: 'category',
                    data: [],
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} V'
                    }
                },
                dataZoom: [
                    {
                        id: 'dataZoomX',
                        type: 'slider',
                        xAxisIndex: [0],
                        filterMode: 'filter',
                        start: 0,
                        end: 30
                    }
                ],
                series: [{
                    data: [],
                    type: 'bar',
                    // barWidth:25,
                }]
            };
            Volt.setOption(VoltOption);
            // 电压上，温度下
            var domT = document.getElementById("TempInfo");
            domT.style.width = (window.innerWidth*0.8 - 193) + 'px';
            domT.style.height = (window.innerHeight*0.8 - 193) + 'px';
            temp = echarts.init(domT);
            tempOption = {
                color: ['#3398DB'],
                tooltip:{},
                xAxis: {
                    type: 'category',
                    data: [],
                    splitLine: {
                        //show: true
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                dataZoom: [
                    {
                        id: 'dataZoomX',
                        type: 'slider',
                        xAxisIndex: [0],
                        filterMode: 'filter',
                        start: 0,
                        end: 30
                    }
                ],
                series: [{
                    data: [],
                    type: 'bar',
                    // barWidth:25,
                }]
            };
            temp.setOption(tempOption);
            flag=true
          },
          getSelectCar:function(){//获取汽车类型下拉列表
            resourceRequst("/dic/queryByType",{keyType:'car_type'},function(res){
               vm.optionType = res.getResult
            },true)
            resourceRequst("/dic/queryByType",{keyType:'car_color'},function(res){
               vm.optionColor = res.getResult
            },true)
          }
      },
      watch:{
        VoltageInfo:function(val){
          if(flag){
            var xData = [];
            _.each(val,function(element, index){
              var _index = index+1;
              xData.push(_index)
            });      
            VoltOption.xAxis.data = xData;
            VoltOption.series[0].data = val;
            Volt.setOption(VoltOption);
           
          }else{
            setTimeout(this.initEchar(), 300);
          }          
        },
        TempInfo:function(val){
          if(flag){
            var xData = [];
            _.each(val,function(element, index){
              var _index = index+1;
              xData.push(_index)
            });
            tempOption.xAxis.data = xData;
            tempOption.series[0].data = val;
            temp.setOption(tempOption);
          }else{
            setTimeout(this.initEchar(), 300);
          }
        }
      }
    })
  </script>
</html>